﻿/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.news .tabs-nav {
    list-style: none;
    margin:0; 
    padding:0; 
    border-right:1px solid #c6c6c6;
    border-left:1px solid #c6c6c6;
    width:268px;
    z-index:30;
    float:left;
    background:url(../images/tabs-bg.gif) repeat-x top center;
}
.news .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
    z-index:0;
}
.news .tabs-nav li {
    float: left;
    margin:0;
    cursor:pointer;
    position:relative;
    z-index:989;
    _width:60px;
}

.news .tabs-nav a, .news .tabs-nav a span {
    display: block;
    padding: 0 10px;
}
.news .tabs-nav .tabs-l a{border-left:1px solid #c6c6c6!important;}
.news .tabs-nav a {
    position: relative;
    padding: 0;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    text-transform:uppercase;
    white-space: nowrap; /* required in IE 6 */
    height: 28px; /* IE 6 treats height as min-height */
    line-height:28px;
    border-right:1px solid #F6F5F5;
    border-left:1px solid #F6F5F5;    
}

.news .tabs-nav .tabs-selected a, .news .tabs-nav a:hover, .news .tabs-nav a:focus, .news .tabs-nav a:active {
    background:url(../images/tabs-active.gif) repeat-x top center;
    border-right:1px solid #c6c6c6;
    border-left:1px solid #c6c6c6;
    left:-1px;
}
.news .tabs-nav a, .news .tabs-nav .tabs-disabled a:hover, .news .tabs-nav .tabs-disabled a:focus, .news .tabs-nav .tabs-disabled a:active {
    left:-1px;
}
.news .tabs-nav a span {

}
*>.news .tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.news .tabs-nav .tabs-selected a span {

}
.news .tabs-nav .tabs-selected a span, .news .tabs-nav a:hover span, .news .tabs-nav a:focus span, .news .tabs-nav a:active span {

}
.news .tabs-nav a span, .news .tabs-nav .tabs-disabled a:hover span, .news .tabs-nav .tabs-disabled a:focus span, .news .tabs-nav .tabs-disabled a:active span {

}
.news .tabs-nav .tabs-selected a:link, .news .tabs-nav .tabs-selected a:visited, .news .tabs-nav .tabs-disabled a:link, .news .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.news .tabs-nav a:hover, .news .tabs-nav a:focus, .news .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.news .tabs-nav .tabs-disabled {
    opacity: .4;
}


/* Skin */
.sp-detail .tabs-nav {
    list-style: none;
    margin:0; 
    padding:5px 0 5px 92px; 
    width:638px;
    z-index:1;
    background:#f5f4f4;
    border-top:3px solid #f27b04;
}
.sp-detail .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
    z-index:0;
}
.sp-detail .tabs-nav li {
    float: left;
    margin:0;
    cursor:pointer;
    z-index:1;
	font:bold;
    _width:60px;
    border-right:1px solid #999;
}
.sp-detail .tabs-nav li.sp-detail-tabs-end{border:none;}

.sp-detail .tabs-nav a, .sp-detail .tabs-nav a span {
    display: block;
    padding: 0 10px;
}
.sp-detail .tabs-nav a {
    padding: 0;
    color: #000;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    text-transform:none;
    white-space: nowrap; /* required in IE 6 */
    height: 16px; /* IE 6 treats height as min-height */
    line-height:16px;   
}

.sp-detail .tabs-nav .tabs-selected a, .sp-detail .tabs-nav a:hover, .sp-detail .tabs-nav a:focus, .sp-detail .tabs-nav a:active {
    color:#3b5998;
}
.sp-detail .tabs-nav a, .sp-detail .tabs-nav .tabs-disabled a:hover, .sp-detail .tabs-nav .tabs-disabled a:focus, .sp-detail .tabs-nav .tabs-disabled a:active {

}
.sp-detail .tabs-nav a span {

}
*>.sp-detail .tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.sp-detail .tabs-nav .tabs-selected a span {

}
.sp-detail .tabs-nav .tabs-selected a span, .sp-detail .tabs-nav a:hover span, .sp-detail .tabs-nav a:focus span, .sp-detail .tabs-nav a:active span {

}
.sp-detail .tabs-nav a span, .sp-detail .tabs-nav .tabs-disabled a:hover span, .sp-detail .tabs-nav .tabs-disabled a:focus span, .sp-detail .tabs-nav .tabs-disabled a:active span {

}
.sp-detail .tabs-nav .tabs-selected a:link, .sp-detail .tabs-nav .tabs-selected a:visited, .sp-detail .tabs-nav .tabs-disabled a:link, .sp-detail .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.sp-detail .tabs-nav a:hover, .sp-detail .tabs-nav a:focus, .sp-detail .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.sp-detail .tabs-nav .tabs-disabled {
    opacity: .4;
}


/* Trang user */
/* Skin */
.user .tabs-nav {
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
    z-index:30;
    float:left;
}
.user .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
    z-index:0;
}
.user .tabs-nav li {
    float: left;
    margin:0;
    cursor:pointer;
    position:relative;
    z-index:989;
    _width:60px;
    margin-right:2px;
}
.user .tabs-nav li.user-tabs-begin{margin-left:12px;}

.user .tabs-nav a, .user .tabs-nav a span {
    display: block;
    padding: 0 20px;
}
.user .tabs-nav a {
    position: relative;
    padding: 0;
    color: #3b5998;
    background:#d8dfea;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform:none;
    white-space: nowrap; /* required in IE 6 */
    height: 26px; /* IE 6 treats height as min-height */
    line-height:26px;
    border:1px solid #d8dfea;
    border-bottom:1px solid #d8dfea ;
    top:1px;
}

.user .tabs-nav .tabs-selected a, .user .tabs-nav a:hover, .user .tabs-nav a:focus, .user .tabs-nav a:active {
    background:#627AAD;
    color: #FFFFFF;
    border:1px solid #627AAD;
    border-bottom:1px solid #627AAD;
}
.user .tabs-nav .tabs-selected a {
    background:#FFFFFF;
    color: #474747;
    border:1px solid #ccc;
    border-bottom:1px solid #FFFFFF;
}
.user .tabs-nav .tabs-selected  n{
    background:#FFFFFF;
    color: #c0c0c0;
    font:normal;

}
.user .tabs-nav a, .user .tabs-nav .tabs-disabled a:hover, .user .tabs-nav .tabs-disabled a:focus, .user .tabs-nav .tabs-disabled a:active {
}
.user .tabs-nav a span {

}
*>.user .tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.user .tabs-nav .tabs-selected a span {

}
.user .tabs-nav .tabs-selected a span, .user .tabs-nav a:hover span, .user .tabs-nav a:focus span, .user .tabs-nav a:active span {

}
.user .tabs-nav a span, .user .tabs-nav .tabs-disabled a:hover span, .user .tabs-nav .tabs-disabled a:focus span, .user .tabs-nav .tabs-disabled a:active span {

}
.user .tabs-nav .tabs-selected a:link, .user .tabs-nav .tabs-selected a:visited, .user .tabs-nav .tabs-disabled a:link, .user .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.user .tabs-nav a:hover, .user .tabs-nav a:focus, .user .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.user .tabs-nav .tabs-disabled {
    opacity: .4;
}

/* Tao shop */
.creat-taogh .tabs-nav {
    list-style: none;
    margin:0; 
    padding:6px 0 8px; 
    border-top:5px solid #f27b04;
    border-bottom:1px solid #ddd;
    width:100%;
    z-index:1;
    float:left; 
    border-right:none;
    border-left:none;
    background:#f5f4f4;
}
.creat-taogh .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
    z-index:0;
}
.creat-taogh .tabs-nav li {
    float: left;
    margin:0;
    cursor:pointer;
    position:relative;
    z-index:1;
    line-height:14px;
    _width:30px;
    color:#dbdbdb;
    border-right:1px solid #dbdbdb;
    padding: 0 8px;
}

.creat-taogh .tabs-nav li.creat-taogh-end{border:none;}

.creat-taogh .tabs-nav a, .creat-taogh .tabs-nav a span {
    display: block;
    padding:0;
}

.creat-taogh .tabs-nav a {
    position: relative;
    padding: 0;
    color: #35373a;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    text-transform:none;
    white-space: nowrap; /* required in IE 6 */
    height: 14px;
    line-height: 14px;  
}

.creat-taogh .tabs-nav .tabs-selected a, .creat-taogh .tabs-nav a:hover, .creat-taogh .tabs-nav a:focus, .creat-taogh .tabs-nav a:active {
    color:#3b5998;
    text-decoration:underline;
    background:none;
    border-right:1px solid #f5f4f4;
    border-left:1px solid #f5f4f4;
    left:0!important;
}
.creat-taogh .tabs-nav a, .creat-taogh .tabs-nav .tabs-disabled a:hover, .creat-taogh .tabs-nav .tabs-disabled a:focus, .creat-taogh .tabs-nav .tabs-disabled a:active {
    left:0!important;
}
.creat-taogh .tabs-nav a span {

}
*>.creat-taogh .tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.creat-taogh .tabs-nav .tabs-selected a span {

}
.creat-taogh .tabs-nav .tabs-selected a span, .creat-taogh .tabs-nav a:hover span, .creat-taogh .tabs-nav a:focus span, .creat-taogh .tabs-nav a:active span {

}
.creat-taogh .tabs-nav a span, .creat-taogh .tabs-nav .tabs-disabled a:hover span, .creat-taogh .tabs-nav .tabs-disabled a:focus span, .creat-taogh .tabs-nav .tabs-disabled a:active span {

}
.creat-taogh .tabs-nav .tabs-selected a:link, .creat-taogh .tabs-nav .tabs-selected a:visited, .creat-taogh .tabs-nav .tabs-disabled a:link, .creat-taogh .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.creat-taogh .tabs-nav a:hover, .creat-taogh .tabs-nav a:focus, .creat-taogh .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.creat-taogh .tabs-nav .tabs-disabled {
    opacity: .4;
}
